<template>
	<view class="conferenceSign_box" :data-theme="theme" :class="theme" :style="globalColor.style">
		<HeadCustom :title="title" :isSpace="true"></HeadCustom>
		<view class="fboxCol confernceSign Ycenter">
			<text class="qdName font38">{{ themeName }}</text>
			<view class="img_box" @tap="signHy">
				<!-- <image
					v-if="!isSign"
					src="https://ebc-prod.cdn.benwunet.com/uni-static/h5/qd32.png"
					mode=""
				></image>
				<image
					v-if="isSign"
					src="https://ebc-prod.cdn.benwunet.com/uni-static/h5/qd33.png"
					mode=""
				></image> -->
				<view class="circle-box">
					
				</view>
				<view class="signTime" v-if="!isSign">
					<view class="font38 p1">点击签到</view>
					<view class="font32 p2">{{ nowTime.split(' ')[0] }}</view>
					<view class="font32 p2">{{ nowTime.split(' ')[1] }}</view>
				</view>
				<view v-else><view class="p1 font40 checkok">已签到</view></view>
				<text v-if="isSign" class="qdTime font28">签到时间：{{ gmtSign }}</text>
			</view>
			
			<view class="qdDetail" v-if="Object.keys(formObj).length != 0">
				<view class="fboxRow" v-for="(item, index) in Object.keys(formObj)" :key="index">
					<view class="font32" style="width: 160rpx; flex-shrink: 0">{{ item }}：</view>
					<text class="font28">{{ formObj[item] }}</text>
				</view>
			</view>
		</view>
		<u-tabbar :fixed="true" :placeholder="true" :safeAreaInsetBottom="true">
			<view class="fboxRow Xcenter Ycenter" style="width: 100%">
				<text class="font24" style="color: #6b707c">服务提供：本无网络科技有限公司</text>
			</view>
		</u-tabbar>

		<!-- <Submit v-else :conferenceId="conferenceId" title="签到成功" content="感谢您的到来，我们竭诚为您服务。"></Submit> -->
	</view>
</template>

<script>
import { conferenceSigneDetail, conferenceSign, conferenceSignDirectSign } from '@/api/h5.js';
import { debounce } from '@/static/js/common.js';
// import Submit from './personal/submit.vue';
export default {
	data() {
		return {
			theme: getApp().globalData.appTheme,
			globalColor: getApp().globalData.globalColor,
			isSign: false,
			applySignMode: 0,
			isShowSubmit: false,
			gmtSign: '',
			conferenceId: '',
			timer: null,
			themeName: '',
			nowTime: '',
			isApp: 0,
			formObj: [],
			title: ''
		};
	},
	onLoad(option) {
		this.conferenceId = option.conferenceId;
		if (option.isShowSubmit) {
			this.isShowSubmit = option.isShowSubmit;
		}
		// this.themeName = decodeURIComponent(option.themeName);
		const { bw_link } = getApp().getBWData(['bw_link']);
		if (bw_link.isApp) {
			this.isApp = bw_link.isApp;
			this.title = '活动签到';
		} else {
			uni.setNavigationBarTitle({
				title: `活动签到`
			});
		}
		this.getSigneDetail();
	},
	onUnload() {
		clearInterval(this.timer);
		this.timer = null;
	},
	methods: {
		// 获取当前时间 并执行定时器
		getTime() {
			this.timer = setInterval(() => {
				let date = new Date();
				this.nowTime = this.shijianc(date.getTime());
			}, 1000);
		},
		shijianc(time) {
			let date = new Date(time);
			let Y = date.getFullYear() + '-';
			let M =
				(date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) +
				'-';
			let D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
			let h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
			let m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
			let s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
			return Y + M + D + h + m + s;
		},
		// 签到
		signHy: debounce(function (event) {
			if (this.isSign) {
				return;
			}
			let url = this.applySignMode ? conferenceSignDirectSign : conferenceSign;
			url({ conferenceId: this.conferenceId }).then((res) => {
				this.getSigneDetail();
			});
		}, 2000),
		// 获取签到详情
		getSigneDetail() {
			conferenceSigneDetail({ conferenceId: this.conferenceId }).then((res) => {
				if (res.data.information) {
					this.formObj = JSON.parse(res.data.information);
				}
				this.isSign = res.data.signIn;
				this.gmtSign = res.data.gmtSign;
				this.applySignMode = res.data.applySignMode;
				if (res.data.themeName) {
					this.themeName = res.data.themeName;
				}
				if (res.data.signIn) {
					clearInterval(this.timer);
					this.timer = null;
					this.isShowSubmit = true;
				} else {
					this.getTime();
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.signTime {
	white-space: nowrap;
}
::v-deep .u-tabbar__content {
	background-color: var(--controllerBgColor);
	border: none;
}
.conferenceSign_box {
	height: 100vh;
}
.confernceSign {
	padding: 50rpx;
	.qdName {
		font-weight: 600;
		color: var(--contourButtonTextColor);
	}
	.img_box {
		position: relative;
		margin: 130rpx 0 150rpx 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 300rpx;
		height: 300rpx;
		background-color: var(--pureButtonBackOneColor);
		border-radius: 50%;
		.circle-box{
			width: 240rpx;
			height: 240rpx;
			background: linear-gradient(360deg, var(--rampButtonBackEndColor) 0%, var(--rampButtonBackStartColor) 100%);
			border-radius: 50%;
		}
		.qdTime {
			position: absolute;
			bottom: -50rpx;
			white-space: nowrap;
			font-weight: 400;
			color: var(--titleFontColor);
		}
		> image {
			width: 288rpx;
			height: 288rpx;
		}
		> view {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			text-align: center;
			.p1 {
				font-weight: 500;
				color: var(--contentBgImageTitleColor);
				word-break: keep-all;
				margin-bottom: 30rpx;
			}
			.checkok{
				margin-bottom: 0;
			}
			.p2 {
				font-weight: 500;
				height: 32rpx;
				white-space: nowrap;
				color: var(--contentBgImageTitleColor);
				line-height: 32rpx;
			}
		}
	}
	.qdDetail {
		background: var(--viewBgColor);
		border-radius: 12rpx;
		padding: 40rpx;
		padding-bottom: 0;
		> view {
			margin-bottom: 40rpx;
			> view {
				color: var(--titleFontColor);
			}
			> text {
				color: var(--contentFontDarkColor);
				line-height: 34rpx;
			}
		}
	}
}
</style>
